<template lang="pug">
.content
    .left_pane
        .header_img
            img.header_img(:src="UserDetailData?.img" alt="Header ReadMe")
        .item
            .display   {{UserInfoData?.display}}
            .display   {{UserInfoData?.email}}
            .display   {{UserInfoData?.create_time}}

    .right_pane
        .user_form
            form(v-show="!ref_isEmailUpdate" )
                ul
                    li(v-for="(item,index)  in showUserInfo" )
                        .form_title {{item.name}}:
                        input(v-model="item.vmode" :placeholder="item.placeholder"  :type="item.type" :readonly="!item.canEdit" autocomplete )
                .getEmailSendCode(@click="UpdateUserInfo")  Update Info

            .change_email(v-show="ref_isEmailUpdate" )
                ul
                    li(v-for="(item,index) in userInfoEmail" )
                        .form_title {{item.name}}:
                        input(v-model="item.vmode" :placeholder="item.placeholder"  :type="item.type" :readonly="!item.canEdit" autocomplete )

                .getEmailSendCode(@click="NewEmailGetCode")  GetEmailCode
                .getEmailSendCode(@click="UpdateYourEmail")  ClickToUpdateYourEmail
        .changeTo(@click="changeEmailUpdate")  ClickToChange
</template>
<script setup lang="ts">
    import {StoreUserDetail, StoreUserInfo} from "../../store/userInfo";
    import {ref} from "vue";
    import type {ResultInfo} from "../../utils/types/ResultInfo";
    import {LogError, LogSuccess} from "../../utils/notification/Index";
    import {UserEmailGet, UserUpdateEmail, UserUpdateImg, UserUpdateInfo} from "../../reqApi/UserApi";
    import {EmailSendCode} from "../../reqApi/LoginApi";
    import {useRouter} from "vue-router";

    const router = useRouter();

    const storeUserInfo = StoreUserInfo()

    const storeUserDetail = StoreUserDetail()

    const UserInfoData = storeUserInfo.Get()
    const UserDetailData = storeUserDetail.Get()
    const ref_isEmailUpdate = ref(false)
    const changeEmailUpdate = () => {
        ref_email.value = ""
        ref_emailcode.value = ""
        ref_isEmailUpdate.value = !ref_isEmailUpdate.value
    }

    const ref_email = ref("")
    const ref_password = ref("")
    const ref_newPassword = ref("")
    const ref_display = ref("")
    const ref_emailcode = ref("")
    const ref_ImgPath = ref("")

    const showUserInfo = ref([
            {name: "display", vmode: ref_display, type: "text", placeholder: "dispaly", canEdit: true},
            {name: "ReadMe Path", vmode: ref_ImgPath, type: "text", placeholder: "img url", canEdit: true},
            {name: "New Password", vmode: ref_password, type: "password", placeholder: "new password", canEdit: true},
            {
                name: "Re New Password",
                vmode: ref_newPassword,
                type: "password",
                placeholder: "re new password",
                canEdit: true
            },
        ]
    )
    const userInfoEmail = ref([
            {name: "new email", vmode: ref_email, type: "email", placeholder: "example@xx.com", canEdit: true},
            {name: "email Code", vmode: ref_emailcode, type: "number", placeholder: "emailcode", canEdit: true},
        ]
    )
    const UserEmailGetCode = () => {
        UserEmailGet().then(resp => {
            let parse = resp.data as ResultInfo<any>;
            LogSuccess(parse.msg)
        })
    }

    const NewEmailGetCode = () => {
        EmailSendCode({
            email: ref_email.value
        }).then(resp => {
            let parse = resp.data as ResultInfo<any>;
            LogSuccess(parse.msg)
        })
    }


    const UpdateUserInfo = () => {
        UserUpdateInfo(
            {
                display: ref_display.value.length <= 0 ? UserInfoData.value?.display : ref_display.value,
                password: ref_password.value.length <= 0 && ref_password.value == ref_newPassword.value ? UserInfoData.value?.password : ref_password.value,
            }
        ).then(resp => {
            let parse = resp.data as ResultInfo<any>;
            LogSuccess(parse.msg)
        })

        const reg = /^\s+|\s+$/g;
        if (ref_ImgPath.value.includes("http")) {
            UserUpdateImg({
                img: ref_ImgPath.value.replace(reg, '')
            })
        }
        router.go(0)
    }
    const UpdateYourEmail = () => {
        if (ref_emailcode.value.toString().length <= 1) {
            LogError("Code Error")
            return
        }

        UserUpdateEmail(
            {
                email: ref_email.value,
                email_code: ref_emailcode.value.toString()
            }
        ).then(resp => {
            let parse = resp.data as ResultInfo<any>;
            if (parse.success) {
                LogSuccess(parse.msg);
                setTimeout(() => {
                    router.go(0)
                }, 1000)

            } else {
                LogError(parse.msg);
            }
        });

    }

</script>
<style lang="sass" scoped>
@import "../../assets/sass/user/userInfoShow"


</style>
